<template>
	<el-form
		:model="ruleForm"
		:rules="rules"
		ref="ruleForm"
		label-width="100px"
		class="demo-ruleForm"
	>
		<el-form-item label="角色名称" prop="username">
			<el-input v-model="ruleForm.username"></el-input>
		</el-form-item>
		<el-form-item label="角色描述" prop="describe">
			<el-input v-model="ruleForm.describe"></el-input>
		</el-form-item>
	</el-form>
</template>

<script>
export default {
	name: 'Verifications',
	data() {
		return {
			ruleForm: {
				username: '',
				describe: '',
			},
			rules: {
				username: [
					{ required: true, message: '角色名称不能为空', trigger: 'blur' },
				],
				describe: [
					{ required: true, message: '角色描述不能为空', trigger: 'blur' },
				],
			},
		}
	},

	mounted() {
		this.$bus.$on('RolesResetFields', () => {
			this.$refs.ruleForm.resetFields()
		})
		this.$bus.$on('RolesValidate', () => {

			this.$refs.ruleForm.validate(boolean => {
				if (boolean) {
					this.$http
						.post('/roles', {
							roleName: this.ruleForm.username,
							roleDesc: this.ruleForm.describe,
						})
						.then(response => {
						const {meta} = response.data

                        if(meta.status == 201){
                            this.$message({
                                 message:meta.msg,
                                 type:'success'
                            })
                            this.$bus.$emit('Rolesreload')
                        }
                        else{
                            this.$message.error('创建失败')
                        }
						})
				} else {
					this.$message.error('添加角色失败！')
				}
			})
		})
	},
}
</script>
